<template>
  <view style="position: relative">
    <view>
      <u-tabs-swiper
        ref="uTabs"
        :list="list"
        :current="current"
        active-color="#F3651F"
        bar-width="120"
        :is-scroll="false"
        @change="tabsChange"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <button class="kefu" open-type="contact" plain hover-stop-propagation>
      <image src="/static/image/kefu2x.png" mode="" />
    </button>
    <!-- swiper -->
    <swiper
      class="swiper"
      :style="{height: height}"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item>
        <!-- 待支付 -->
        <scroll-view scroll-y style="height: 100%; width: 100%; position: relative" @scrolltolower="onreachBottom(1)">
          <order-item
            v-for="(item, index) in weiList"
            :key="item.b_id"
            :goods="item"
            :i="index"
            @quxiao="quxiao"
          ></order-item>
          <null-item v-if="show && weiList.length === 0"></null-item>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100%; width: 100%; position: relative" @scrolltolower="onreachBottom(2)">
          <order-item @shouhuo="shouhuo" v-for="item in zhifuList" :key="item.b_id" :goods="item"></order-item>
          <null-item v-if="show1 && zhifuList.length === 0"></null-item>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100%; width: 100%; position: relative" @scrolltolower="onreachBottom(3)">
          <order-item v-for="item in finishedList" :key="item.b_id" :goods="item"></order-item>
          <null-item v-if="show2 && finishedList.length === 0"></null-item>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100%; width: 100%; position: relative" @scrolltolower="onreachBottom(4)">
          <order-item v-for="item in refundList" :key="item.b_id" :goods="item"></order-item>
          <null-item v-if="show3 && refundList.length === 0"></null-item>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
  import orderItem from '../../commponents/public/order-item'
  import order from '@/services/order'
  import nullItem from './null'
  export default {
    data() {
      return {
        list: [
          {
            name: '待支付'
          },
          {
            name: '待发货'
          },
          {
            name: '待收货'
          },
          {
            name: '已完成'
          }
        ],
        current: 0,
        swiperCurrent: 0,
        height: '',
        weiList: [],
        finishedList: [],
        zhifuList: [],
        refundList: [],
        page: 1,
        limit: 10,
        status: 1,
        show: false,
        show1: false,
        show2: false,
        show3: false
      }
    },
    components: {
      orderItem,
      nullItem
    },
    methods: {
      tabsChange(index) {
        this.swiperCurrent = index
      },
      shouhuo() {
        this.zhifuList = []
        this.getYi()
      },
      quxiao() {
        this.weiList = []
        this.page = 1
        this.getWei()
      },
      transition(e) {
        let dx = e.detail.dx
        this.$refs.uTabs.setDx(dx)
      },
      // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
      // swiper滑动结束，分别设置tabs和swiper的状态
      animationfinish(e) {
        let current = e.detail.current
        this.$refs.uTabs.setFinishCurrent(current)
        this.swiperCurrent = current
        this.current = current
        this.page = 1
        this.show = false
        this.show1 = false
        this.show2 = false
        this.show3 = false
        if (this.current === 0) {
          this.getWei('hua')
        }
        if (this.current === 1) {
          this.getYi('hua')
        }
        if (this.current === 2) {
          this.getWan('hua')
        }
        if (this.current === 3) {
          this.getTui('hua')
        }
      },
      onreachBottom(num) {
        this.page++
        if (num === 1) {
          this.getWei()
        }
        if (num === 2) {
          this.getYi()
        }
        if (num === 3) {
          this.getWan()
        }
        if (num === 4) {
          this.getTui()
        }
      },
      getWei(type) {
        order
          .list({
            page: this.page,
            limit: this.limit,
            status: 1
          })
          .then(data => {
            this.show = true
            if (type == 'hua') {
              this.weiList = data.list
            } else {
              this.weiList.push(...data.list)
            }
          })
      },
      getYi(type) {
        order
          .list({
            page: this.page,
            limit: this.limit,
            status: 2
          })
          .then(data => {
            this.show1 = true
            if (type == 'hua') {
              this.zhifuList = data.list
            } else {
              this.zhifuList.push(...data.list)
            }
          })
      },
      getWan(type) {
        order
          .list({
            page: this.page,
            limit: this.limit,
            status: 3
          })
          .then(data => {
            this.show2 = true
            if (type == 'hua') {
              this.finishedList = data.list
            } else {
              this.finishedList.push(...data.list)
            }
          })
      },
      getTui(type) {
        order
          .list({
            page: this.page,
            limit: this.limit,
            status: 4
          })
          .then(data => {
            this.show3 = true
            if (type == 'hua') {
              this.refundList = data.list
            } else {
              this.refundList.push(...data.list)
            }
          })
      },
      getList() {
        this.page = 1
        this.limit = 10
        this.weiList = []
        this.finishedList = []
        this.zhifuList = []
        this.refundList = []

        if (this.current === 1) {
          this.getYi()
        }
        if (this.current === 2) {
          this.getWan()
        }
        if (this.current === 3) {
          this.getTui()
        }
        this.getWei()
      }
    },
    onShow() {
      uni.getSystemInfo({
        success: e => {
          this.height = `calc(${e.windowHeight}px - 80rpx)`
        }
      })
      this.getList()
    }
  }
</script>
<style>
  page {
    background: #f4f4f4;
  }
</style>
<style lang="scss" scoped>
  .swiper {
    height: 200px;
  }
  .kefu {
    > image {
      width: 100%;
      height: 100%;
    }
    ::after {
      border: none;
    }
    padding: 0;
    border: none;
    background-color: transparent;
    width: 100rpx;
    height: 100rpx;
    position: fixed;
    right: 60rpx;
    opacity: 0.8;
    bottom: 100rpx;
    z-index: 1000;
  }
</style>
